<!DOCTYPE html>
<html lang="en">
<head>
    <title>添加员工信息</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/laypage.css">
    <link rel="stylesheet" href="/layui-util/css/layui.css" media="all">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/jquery.validation/1.14.0/jquery.validate.min.js"></script>
    <script src="/js/jquery.validation/1.14.0/messages_zh.min.js"></script>
    <script src="/js/vue/vue.min.js"></script>
    <script src="/layui-util/layui.js" charset="utf-8"></script>
    <script src="/js/layer/layer.js" charset="utf-8"></script>

    <style>
        select.error, input.error {
            border: 1px solid red;
        }
    </style>
    <#--时间选择-->
</head>
<body>
<script src="/js/webSocket.js"></script>
<section id="container">
<#include "sider.ftl">
    <section id="main-content">
        <section class="wrapper">
            <div class="table-agile-info">
                <div class="panel panel-default">
                    <section class="panel">
                        <header class="panel-heading">
                            添加员工基本信息
                        </header>
                        <div class="panel-body">
                            <div class="form" id="app">
                                <form class="cmxform form-horizontal" id="addEmpForm">
                                    <div class="form-group ">
                                        <label for="empName" class="control-label col-lg-3">姓名</label>
                                        <div class="col-lg-6">
                                            <input class=" form-control" id="empName" name="empName" type="text"
                                                   autocomplete="off">
                                        </div>
                                    </div>
                                    <div class="form-group ">
                                        <label for="empPassword" class="control-label col-lg-3">密码</label>
                                        <div class="col-lg-6">
                                            <input class=" form-control" id="empPassword" name="empPassword"
                                                   type="password">
                                        </div>
                                    </div>
                                    <div class="form-group ">
                                        <label for="empPassword" class="control-label col-lg-3">确认密码</label>
                                        <div class="col-lg-6">
                                            <input class=" form-control" id="empPassword1" name="empPassword1"
                                                   type="password">
                                        </div>
                                    </div>
                                    <div class="form-group ">
                                        <label for="empPhone" class="control-label col-lg-3">电话</label>
                                        <div class="col-lg-6">
                                            <input class=" form-control" id="empPhone" name="empPhone" type="text"
                                                   autocomplete="off">
                                        </div>
                                    </div>
                                    <div class="form-group ">
                                        <label for="empBirthday" class="control-label col-lg-3">出生日期</label>
                                        <div class="col-lg-6">
                                            <div class="layui-input-inline">
                                                <input class=" form-control" id="empBirthday" name="empBirthday"
                                                       type="text" autocomplete="off">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group ">
                                        <label for="empHireDate" class="control-label col-lg-3">入职时间</label>
                                        <div class="col-lg-6">
                                            <div class="layui-input-inline">
                                                <input class="form-control" id="empHireDate" name="empHireDate"
                                                       type="text">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group ">
                                        <label for="empAddress" class="control-label col-lg-3">现住地址</label>
                                        <div class="col-lg-6">
                                            <input class=" form-control" id="empAddress" name="empAddress" type="text"
                                                   autocomplete="off">
                                        </div>
                                    </div>
                                    <div class="form-group" style="margin-left: 320px">
                                        <label for="buuid">支点</label>
                                        <select name="buuid" id="buuid"
                                                style="width: 100px;height: 35px;margin-left: 24px">
                                            <option></option>
                                            <option v-for="(item,index) in result1" v-bind:value="item.buuid">
                                                {{item.bname}}
                                            </option>
                                        </select>
                                    </div>
                                    <div class="form-group" style="margin-left: 320px">
                                        <label for="ruuid">角色</label>
                                        <select name="ruuid" id="ruuid"
                                                style="width: 100px;height: 35px;margin-left: 24px">
                                            <option></option>
                                            <option v-for="(item,index) in result2" v-bind:value="item.ruuid">
                                                {{item.rname}}
                                            </option>
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-lg-offset-3 col-lg-6">
                                            <button class="btn btn-primary" type="button" id="referBut">提交</button>
                                            <button class="btn btn-primary" type="reset">重置</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </section>
                </div>
            </div>
        </section>
       <#include "foot.ftl"><#--引入底部-->
    </section>
</section>
</body>
</html>
<script>
    /*页面加载时触发-----支点和角色*/
    var app = new Vue({
        el: "#app",
        data: {
            result1: [],
            result2: []
        }
    });
    var getBranchList = function () {
        $.ajax({
            url: "/emp/doGetBranchList",
            type: "post",
            dataType: "json",
            success: function (data) {
                app.result1 = data.branchList;
            }
        });
    };
    var getRoleList = function () {
        $.ajax({
            type: "POST",
            url: "/emp/getAllRole",
            dataType: "json",
            success: function (data) {
                app.result2 = data.roleList;
            }
        });
    };
    getBranchList();
    getRoleList();
</script>
<script>
    /*点击时触发----提交表单*/
    var addEmp = function () {

        if (!check().form()) {
            return;
        }
        $.ajax({
            url: "/emp/toAddEmp",
            type: "post",
            data: $("#addEmpForm").serialize(),
            success: function () {
                layer.open(window.location = "/emp/toGetEmpTable");
            }
        });
    };
    var check =function () {
        jQuery.validator.addMethod("regex", function (value, element, params) {
            var exp = new RegExp(params);
            return exp.test(value);
        }, "格式错误");
        /*时间大小比较*/
        jQuery.validator.methods.compareDate = function (value, element, param) {
            var startDate = jQuery(param).val();
            return startDate < value;
        };
        return $("#addEmpForm").validate({
            rules: {
                empName: {
                    required: true,
                    rangelength: [2, 5]
                },
                empPassword: {
                    required: true,
                    rangelength: [3, 11]
                },
                empPassword1: {
                    required: true,
                    equalTo: "#empPassword"
                },
                empPhone: {
                    required: true,
                    regex: "^[1][3,4,5,7,8,9][0-9]{9}$"
                },
                empBirthday: {
                    required: true

                },
                empAddress: {
                    required: true
                },
                empHireDate: {
                    required: true,
                    compareDate: "#empBirthday"
                },
                buuid: {
                    required: true
                },
                ruuid: {
                    required: true
                }
            },
            messages: {
                empName: {
                    required: "",
                    rangelength: "用户名长度为2-5之间"
                },
                empPassword: {
                    required: "",
                    rangelength: "用户名长度为3-11之间"
                },
                empPassword1: {
                    required: "",
                    equalTo: "两次密码不一致"
                },
                empPhone: {
                    required: "",
                    regex: "手机号格式不正确"
                },
                empBirthday: {
                    required: ""
                },
                empAddress: {
                    required: ""
                },
                empHireDate: {
                    required: "",
                    compareDate: "入职时间必须大于出生时间"
                },
                buuid: {
                    required: ""
                },
                ruuid: {
                    required: ""
                }
            }
        });
    };
    $("#referBut").click(function () {
        ignore: ":hidden:not(select)";//解决无法校验select
        $("#referBut").submit();//button按钮变为submit
        addEmp();
    });
    $("#addEmpForm").click(function () {

        if (!check().form()) {
            return;
        }
    });
    layui.use('laydate', function () {
        var laydate = layui.laydate;
        laydate.render({
            elem: '#empBirthday'
        });
        laydate.render({
            elem: '#empHireDate'
        });
    });
</script>

